<template>
  <div>
    <div v-show="tabPand==0">
      <!-- <div
        :class="id==0?'InformationCenter_die_listone img_die':(id==1?'InformationCenter_die_listtwo img_die':'InformationCenter_die_listthree img_die')"
      >
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <div></div>
            <div style="margin-top:-20rpx">{{item.notice_title}}</div>
          </div>
        </div>
        <div>{{item.data_add_time}}</div>

      </div>-->
      <div
        class="InformationCenter_die_listtwo img_die"
        v-for="(item,index) in tnoticeWeidu"
        :key="index"
        @click="readnotice(item.data_id,0,index)"
      >
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <span>{{item.notice_title}}</span>
          </div>
        </div>
        <div>{{item.data_add_time}}</div>
        <img src="http://www.zhaoshengku.net/wx-tuoyuanonexiaoxi.png" alt />
      </div>
      <!-- <div class="InformationCenter_die_listthree img_die">
          <div>
            <div>
              <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
            </div>
            <div>
              <div>
                <span>杨老师</span>
                <span>回复了你的评论</span>
              </div>
              <div>
                <div>
                  <img src="http://www.zhaoshengku.net/wx-yuanjiaotuanti.png" alt />
                </div>
                <div>项目名称项目名称项目名称</div>
              </div>
            </div>
          </div>
          <div>2019-08-15</div>
          <img src="http://www.zhaoshengku.net/wx-tuoyuanonexiaoxi.png" alt />
      </div>-->
    </div>

    <div v-show="tabPand==1">
      <!-- <div
        class="InformationCenter_die_listone img_die"
        v-for="(item,index) in tnoticeYidu"
        :key="index"
        @click="allDelete()"
      >
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <span>{{item.notice_title}}</span>
          </div>
        </div>
        <div>{{item.data_add_time}}</div>
      </div>-->
      <div
        class="InformationCenter_die_listtwo img_die"
        v-for="(item,index) in tnoticeYidu"
        :key="index"
        @click.stop="navXiang(item.data_id)"
        @longpress="lengthTab(index)"
      >
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <span>{{item.notice_title}}</span>
          </div>
          <div :class="deleteIsshowArr==index?'delete deletetwo':'delete '" v-if="deleisshow">
            <div @click.stop="deleteTrue(item.data_id,index)">删除</div>
            <div @click.stop="endQuxiao">取消</div>
          </div>
        </div>
        <div>{{item.data_add_time}}</div>
      </div>
      <!-- <div class="InformationCenter_die_listthree img_die">
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <div>
              <span>杨老师</span>
              <span>回复了你的评论</span>
            </div>
            <div>
              <div>
                <img src="http://www.zhaoshengku.net/wx-yuanjiaotuanti.png" alt />
              </div>
              <div>项目名称项目名称项目名称</div>
            </div>
          </div>
        </div>
        <div>2019-08-15</div>
      </div>-->
    </div>
    <!-- <div v-show="tabPand==2">
      <div class="InformationCenter_die_listone img_die">
        <div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-tuoyuantwoxiaoxi.png" alt />
          </div>
          <div>
            <div>平台1.2版本正式上线，请享用</div>
            <div>系统通知</div>
          </div>
        </div>
        <div>2019-08-15</div>
      </div>
    </div>-->
    <div v-if="weiIsshow" class='node_p'>暂时没有收到新的消息</div>
    <div v-if="yiIsshow" class='node_p'>没有更多消息</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPand: -1,
      id: 0,
      headerCode: "",
      allTongz: [],
      tnoticeYidu: [],
      tnoticeWeidu: [],
      weiIsshow: false,
      yiIsshow: false,
      deleteIsshowArr: -1,
      deleisshow: false,
      unmer: 0
    };
  },
  methods: {
    // 设置信息为已读
    readnotice(id, ind, tin) {
      this.deleteIsshowArr = -1;
      wx.navigateTo({
        url: "/pages/NotificationDetails/main?id=" + id + "&index=" + ind
      });
      this.tnoticeWeidu.splice(tin, 1);
    },
    lengthTab(e) {
      this.deleisshow = true;
      this.deleteIsshowArr = e;
    },
    endQuxiao() {
      this.deleteIsshowArr = -1;
    },
    // 删除信息
    deleteTrue(id, ind) {
      this.deleisshow = false;
      wx.showModal({
        title: "提示",
        content: "是否确定删除此信息",
        success: res => {
          if (res.confirm) {
            wx.request({
              url: "https://api.zhaoshengku.net/index/notice/delnotice",
              method: "post",
              data: {
                id: id
              },
              header: {
                Authorization: this.headerCode,
                "X-Requested-With": "xmlhttprequest"
              },
              success: res => {
                if (res.data.code == 200) {
                  this.tnoticeYidu.splice(ind, 1);
                  this.unmer += 1;
                }
              },
              fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
            });
          } else if (res.cancel) {
            this.deleteIsshowArr = -1;
          }
        }
      });
    },
    navXiang(id, ind) {
      if (this.deleisshow) {
        this.deleisshow = false;
        this.deleteIsshowArr = -1;
        return;
      }
      ind += this.unmer;

      wx.navigateTo({
        url: "/pages/NotificationDetails/main?id=" + id + "&index=" + ind
      });
    },
    // 全部设置为已读
    allYidu() {
      wx.request({
        url: "https://api.zhaoshengku.net/index/notice/readallnotice",
        method: "post",
        header: {
          Authorization: this.headerCode,
          "X-Requested-With": "xmlhttprequest"
        },
        success: res => {},
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 删除所有信息
    allDelete() {
      wx.request({
        url: "https://api.zhaoshengku.net/index/notice/delallnotice",
        method: "post",
        header: {
          Authorization: this.headerCode,
          "X-Requested-With": "xmlhttprequest"
        },
        success: res => {
          if (res.data.code == 200) {
            this.deleteIsshowArr = -1;
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    onShows() {
      // wx.startPullDownRefresh();
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      var data_read = this.$root.$mp.query.id;

      this.unmer == 0;
      this.tnoticeWeidu = [];
      this.tnoticeYidu = [];

      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = "Bearer " + res.data;
          wx.request({
            url: "https://api.zhaoshengku.net/index/notice/getnotice",
            method: "post",
            data: {
              data_read: data_read,
              pagenum: 1,
              pagesize: 10
            },
            header: {
              Authorization: this.headerCode,
              "X-Requested-With": "xmlhttprequest"
            },
            success: res => {
              wx.stopPullDownRefresh();
              this.allTongz = res.data.data.data;
              wx.hideToast();
              if (this.tabPand <= 0) {
                if (res.data.deCount == 0) {
                  this.weiIsshow = true;
                }
              } else {
                if (res.data.data.total - res.data.deCount == 0) {
                  this.weiIsshow = true;
                }
              }

              //this.tnoticeYidu=res.data.data.data;

              this.allTongz.forEach(element => {
                console.log(element);
                element.data_add_time = element.data_add_time.substring(0, 10);
                if (element.data_read == 0) {
                  this.tnoticeWeidu.push(element);
                } else {
                  this.tnoticeYidu.push(element);
                }
              });
            },
            fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
          });
        }
      });
    }
  },
  onLoad(option) {
    this.weiIsshow = false;
    this.yiIsshow = false;

    // 获取token
    this.tabPand = option.id;
    wx.setNavigationBarTitle({
      title: option.name
    });
  },
  onShow() {
    this.onShows();
  },
  mounted() {
    // 设置头
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>
<style scoped>
.node_p{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 23rpx;
  color:#666;
}
.delete > div:nth-child(1) {
  width: 100rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 24rpx;
  background: red;
  border-radius: 10rpx 10rpx 0 0;
}

.delete > div:nth-child(2) {
  width: 100rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 24rpx;
  background: rgba(0, 208, 11);
  border-radius: 0 0 10rpx 10rpx;
}
.delete {
  width: 100rpx;
  height: 120rpx;
  transition: all 0.5s;
  position: absolute;
  right: -100rpx;
  border-radius: 10rpx;
  z-index: 222;
}
.deletetwo {
  transform: translateX(-250rpx);
}
.img_die {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0px 6rpx 0px rgba(102, 102, 102, 0.36);
  border-radius: 10rpx;
  position: relative;
  margin-bottom: 10rpx;
}
.InformationCenter_die_listone {
  height: 137rpx;
  margin-top: 20rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  padding-bottom: 10rpx;
}
.img_die > div:nth-child(2) {
  position: absolute;
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 36rpx;
  right: 20rpx;
  bottom: 10rpx;
}
.InformationCenter_die_listone > div:nth-child(1) {
  display: flex;
  align-items: center;
  height: 137rpx;
}
.img_die > div:nth-child(1) > div:nth-child(1) > img {
  width: 89rpx;
  height: 89rpx;
  border-radius: 50%;
}
.img_die > div:nth-child(1) > div:nth-child(1) {
  height: 89rpx;
}
.img_die > div:nth-child(1) > div:nth-child(1) {
  margin-right: 27rpx;
}
.InformationCenter_die_listone
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1) {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: -20rpx;
}
.InformationCenter_die_listone
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(2) {
  font-size: 24rpx;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}
.img_die > img {
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  right: 20rpx;
  top: 10rpx;
}
.InformationCenter_die_listtwo > div:nth-child(1) {
  display: flex;
  height: 137rpx;
  align-items: center;
}
.InformationCenter_die_listtwo > div:nth-child(1) > div:nth-child(2) {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.InformationCenter_die_listthree {
  padding-top: 55rpx;
}
.InformationCenter_die_listthree > div:nth-child(1) {
  display: flex;
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1) {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1)
  > span:nth-child(1) {
  color: #2297d4ff;
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(2) {
  display: flex;
  width: 575rpx;
  height: 147rpx;
  align-items: center;
  background: #ececec;
  padding-left: 14rpx;
  margin-top: 40rpx;
  margin-bottom: 56rpx;
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(1)
  > img {
  width: 101rpx;
  height: 95rpx;
  border-radius: 10rpx;
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(1) {
  height: 95rpx;
  margin-right: 12rpx;
}
.InformationCenter_die_listthree
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(2) {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
</style>
